<template class="h-full">
  <div class="h-full pt-24 mx-auto">
    <van-cell-group inset>
      <div class="px-6 bg-white rounded-md center">
        <div class="grid pt-20 pb-20 place-items-center">
          <img class="block h-12" src="@/assets/index.png" alt="ChitChat Logo" />
        </div>
        <van-field v-model="username" :label="t('login.account')" :placeholder="t('login.inputAccount')" />
        <van-field v-model="password" :label="t('login.password')"
          :placeholder="t('login.inputPassword')" type="password" />
        <van-popup :show="state.show" round position="bottom" @close="closePopup" style="padding: 10px">
          <van-picker :title="t('login.choseLang')" :confirm-button-text="t('confirm')" :cancel-button-text="t('cancel')"
            :columns="state.option" :default-index="2" @confirm="handleChange" @cancel="closePopup">
          </van-picker>
        </van-popup>

        <!-- <div class="border-t van-cell van-field" data-v-d0e06bca="">
          <div class="van-cell__title van-field__label">
            <label id="van-field-4-label" for="van-field-4-input">{{
              t("login.lang")
            }}</label>
          </div>
          <van-cell :title="state.currentLang.text" is-link @click="showPopup" />
        </div> -->

        <van-cell :value='state.currentLang.text' is-link @click="showPopup">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title"> {{ t("login.lang") }}</span>
            <!-- <van-tag type="primary">标签</van-tag> -->
          </template>
        </van-cell>
        <van-checkbox style="margin-left: 20px; margin-top: 10px;" v-model="checked" shape="square" plain
          checked-color="#07c160">{{ t('rememberPwd') }}</van-checkbox>


        <!-- <van-button class="w-full bg-blue-900" style="margin-bottom: 28px;" type="primary" @click="login">{{
          t("login.login")
        }}</van-button> -->
        <van-field style="margin-bottom: 28px">
          <template #input>
            <van-button class="w-full bg-blue-900" type="primary" @click="login">{{
              t("login.login")
            }}</van-button>
          </template>
        </van-field>
      </div>
    </van-cell-group>
  </div>
</template>

<script setup lang="ts">
// import { useStore } from "@/stores";
import { Base64 } from 'js-base64';
import router from "@/router";
import { localStorage } from "@/utils/local-storage";
import i18n from "@/locales/index";
import { useI18n } from "vue-i18n";
import {
  postRequest,
  // queryProse,
  // postRequest,
  // postRequestParams,
} from "@/api";
import { AppToast } from "@/utils/appToast";
import {
  STORAGE_TOKEN_KEY,
  STORAGE_LANG_KEY,
  STORAGE_USER_DATA_KEY,
  USR_KEY,
  PWD_KEY,
} from "@/stores/mutation-type";
const { t } = useI18n();
const state = reactive({
  show: false,
  option: [
    {
      value: "zh-CN",
      text: "中文",
    },
    {
      value: "en-US",
      text: "English",
    },
    {
      value: "ru-RU",
      text: "Русский",
    },
  ],
  currentLang: {
    value: "zh-CN",
    text: "中文",
  },
});
if (localStorage.get(STORAGE_LANG_KEY)) {
  const lan = state.option.find(
    (item) => item.value === localStorage.get(STORAGE_LANG_KEY)
  );
  if (lan) {
    state.currentLang = lan;
  }
}
// 修改当前语言
const handleChange = (e: any): void => {
  const lang = e.selectedOptions[0].value;
  state.currentLang = e.selectedOptions[0];
  i18n.global.locale.value = lang;
  localStorage.set(STORAGE_LANG_KEY, lang);
  state.show = false;
};
const showPopup = () => {
  state.show = true;
};
const closePopup = () => {
  state.show = false;
};
const username = ref("");
const password = ref("");
const checked = ref(false);
const login = () => {
  if (!username.value) {
    AppToast(t("login.inputAccount"), "fail");
    return;
  }
  if (!password.value) {
    AppToast(t("login.inputPassword"), "fail");
    return;
  }

  postRequest("/login", {
    userName: username.value,
    password: password.value,
  }).then((res) => {
    if (res.returnCode === 10000) {
      AppToast(t("login.success"));
      localStorage.set(STORAGE_TOKEN_KEY, res.data.token);
      if (checked.value) {
        localStorage.set(USR_KEY, username.value);
        localStorage.set(PWD_KEY, Base64.encode(password.value));
      } else {
        localStorage.remove(USR_KEY);
        localStorage.remove(PWD_KEY);
      }
      postRequest('/getInfo', {}).then(res => {
        localStorage.set(STORAGE_USER_DATA_KEY, res.data.user);
        // 跳转到home页面
        router.push("/");
      })
    } else {
      const msg = res.message ? res.message : "";
      AppToast(t("login.error") + " " + msg, "fail");
    }
  });
};
// const store = useStore();
// const themeStore = localStorage.get("theme");
onMounted(() => {
  const usr = localStorage.get(USR_KEY);
  if (usr) {
    username.value = usr;
    password.value = Base64.decode(localStorage.get(PWD_KEY)); // base64解密
    checked.value = true;
  }
});
</script>

<style lang="less" scoped>
html {
  background-color: #f5f5f5;
}
</style>
